<template>
  <div class="filter-container">
    <el-button type="primary" @click="addFilter" class="add-btn">
      <el-icon>
        <Plus />
      </el-icon>添加筛选条件
    </el-button>

    <div class="filters-wrapper" v-if="filters.length > 0">
      <!-- 连接线和切换按钮 -->
      <div class="connection-container" v-if="filters.length >= 2">
        <div class="connection-line"></div>
        <div class="relation-toggle">
          <el-button circle @click="toggleRelation" :class="{ 'or-mode': relation === '或' }">
            {{ relation }}
          </el-button>
        </div>
      </div>

      <!-- 筛选条件列表 -->
      <div class="filters-list">
        <div v-for="(filter, index) in filters" :key="filter.id" class="filter-item">

          <!-- 条件内容 -->
          <div class="filter-content">
            <el-select v-model="filter.field" placeholder="请选择字段" class="field-select">
              <el-option label="张飞" value="张飞"></el-option>
              <el-option label="关羽" value="关羽"></el-option>
              <el-option label="刘备" value="刘备"></el-option>
            </el-select>

            <el-select v-model="filter.operator" placeholder="请选择操作符" class="operator-select">
              <el-option label="等于" value="等于"></el-option>
              <el-option label="小于" value="小于"></el-option>
              <el-option label="大于" value="大于"></el-option>
            </el-select>

            <el-select v-model="filter.value" placeholder="请选择值" class="value-select">
              <el-option v-for="num in 15" :key="num" :label="num.toString()" :value="num"></el-option>
            </el-select>

            <el-button circle class="delete-btn" @click="removeFilter(index)" v-if="filters.length > 1">
              <el-icon>
                <Close />
              </el-icon>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElButton, ElSelect, ElOption, ElIcon } from 'element-plus'
import { Plus, Close } from '@element-plus/icons-vue'

// 筛选条件关系（且/或）
const relation = ref('且')

// 筛选条件列表
const filters = reactive([])

// 添加筛选条件
const addFilter = () => {
  filters.push({
    id: Date.now() + Math.random(),
    field: '',
    operator: '',
    value: null
  })
}

// 删除筛选条件
const removeFilter = (index) => {
  filters.splice(index, 1)
}

// 切换关系（且/或）
const toggleRelation = () => {
  relation.value = relation.value === '且' ? '或' : '且'
}
</script>

<style scoped>
.filter-container {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
}

.add-btn {
  margin-bottom: 20px;
}

.filters-wrapper {
  position: relative;
}

.connection-container {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.connection-line {
  position: absolute;
  left: 15px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background-color: #409EFF;
}

/* 使用伪元素实现延长线 */
.connection-line::before,
.connection-line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #409EFF;
}

.connection-line::before {
  top: 0;
}

.connection-line::after {
  bottom: 0;
}

.relation-toggle {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.relation-toggle button {
  width: 32px;
  height: 32px;
  font-weight: bold;
  font-size: 14px;
}

.relation-toggle .or-mode {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.filters-list {
  margin-left: 50px;
  position: relative;
  z-index: 2;
}

.filter-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  position: relative;
}



.filter-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

.field-select,
.operator-select {
  width: 120px;
}

.value-select {
  width: 100px;
}

.delete-btn {
  margin-left: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .filters-list {
    margin-left: 30px;
  }

  .connection-container {
    left: 10px;
    width: 20px;
  }

  .connection-line {
    left: 10px;
  }

  .relation-toggle {
    left: 10px;
  }
}
</style>